<script setup lang="ts">
import { ref, onMounted, defineProps, defineEmits, watch, computed } from "vue";
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
import { getDeviceAstLogsApi, DeviceAstLogModel } from '@/api/products/device';
import { formatSampletime } from '@/utils/appCommon/timeUtil';

// 定义props
const props = defineProps<{
  deviceNo: string;
  visible: boolean;
}>();

// 定义emits
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void;
}>();

const { t } = useI18n();

// 表格数据
const astLogs = ref<DeviceAstLogModel[]>([]);
const dialogVisible = computed({
  get: () => props.visible || false,
  set: (val) => {
    emit('update:visible', val);
    if (!val) {
      astLogs.value = [];
    }
  }
});

// 加载状态
const loading = ref(false);

// 加载AST日志
const loadAstLogs = async () => {
  if (!props.deviceNo) {
    ElMessage.warning(t('device.astLogs.empty'));
    return;
  }

  loading.value = true;
  try {
    const response = await getDeviceAstLogsApi({ deviceNo: props.deviceNo });
    if (response.data?.list) {
      astLogs.value = response.data.list;
    } else {
      astLogs.value = [];
    }
  } catch (error) {
    ElMessage.error(t('common.error') + (error as Error).message);
    console.error('Failed to load AST logs:', error);
  } finally {
    loading.value = false;
  }
};

// 关闭对话框
const handleClose = (done: () => void) => {
  emit('update:visible', false);
  done();
};

// 刷新数据
const handleRefresh = () => {
  loadAstLogs();
};

watch(() => props.visible, (newVisible) => {
  if (newVisible) {
    loadAstLogs();
  }
}, { immediate: true });
// 监听设备编号变化，当编号改变时重新加载数据
watch(
  () => props.deviceNo,
  (deviceNo) => {
    if (deviceNo && props.visible) {
      loadAstLogs();
    }
  }
);

</script>

<template>
  <el-dialog
    :title="t('device.astLogs.title', { deviceNo: deviceNo })"
    v-model="dialogVisible"
    width="80%"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div class="ast-logs-container">
      <div class="logs-header">
        <el-button type="primary" size="small" @click="handleRefresh" :loading="loading">
          {{ t('device.astLogs.refresh') }}
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="astLogs"
        style="width: 100%"
        :empty-text="t('device.astLogs.empty')"
      >
        <el-table-column
          prop="deviceNo"
          :label="t('device.astLogs.deviceNo')"
          min-width="180"
        />
        <el-table-column
          prop="data"
          :label="t('device.astLogs.data')"
          min-width="120"
        />
        <el-table-column
          prop="sampletime"
          :label="t('device.astLogs.sampleTime')"
          min-width="180"
          :formatter="(row: DeviceAstLogModel) => formatSampletime(row.sampletime)"
        />
      </el-table>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.ast-logs-container {
  padding: 10px 0;
}

.logs-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.el-table {
  margin-top: 10px;
}
</style>
